<template>
    <h3>告警跳闸</h3>
    <div class="warning-grid">
        <span>
            <el-checkbox v-model="overload" label="过载" size="large" />
        </span>
        <span>
            <el-checkbox v-model="leakage" label="漏电" size="large" />
        </span>
        <span>
            <el-checkbox v-model="highTemp" label="高温" size="large" />
        </span>
        <span>
            <el-checkbox v-model="overCurrent" label="过流" size="large" />
        </span>
        <span>
            <el-checkbox v-model="overVoltage" label="过压" size="large" />
        </span>
        <span>
            <el-checkbox v-model="underVoltage" label="欠压" size="large" />
        </span>
    </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
const overload = ref(false)
const leakage = ref(false)
const highTemp = ref(false)
const overCurrent = ref(false)
const overVoltage = ref(false)
const underVoltage = ref(false)
</script>

<style scoped>
.warning-grid {
    width: 50%;
    display: grid;
    /*3列 等宽*/
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
</style>